<template>
  <!-- 批量添加剧集 -->
  <el-dialog
    title="批量添加剧集"
    :visible.sync="open"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @before-close="onBeforeClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="批量上传视频" prop="episode_ids">
        <VideoUploadBatchOss
          ref="videoUploadBatchOssRef"
          :library_id="form.library_id"
          :oss-id.sync="form.oss_id"
          :video_folder="video_folder"
          @uploadLoading="uploadLoading"
          @onceSuccess="onceSuccess"
          @successResult="successResult"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="onBeforeClose">取 消</el-button>
      <el-button type="primary" :disabled="btnDisable" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addBatchEpisode } from '@/api/video/library'
import VideoUploadBatchOss from '@/components/VideoUploadBatchOss/index.vue'

export default {
  name: 'AddBatchEpisode',
  components: {
    VideoUploadBatchOss
  },
  props: {
    libraryId: {
      type: String,
      default: ''
    },
    // 视频文件夹
    video_folder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 表单参数
      form: {
        library_id: undefined,
        episode_ids: undefined
      },
      // 表单校验
      rules: {
        episode_ids: [
          { required: true, message: '请上传视频', trigger: ['blur', 'change'] }
        ]
      },
      open: false,
      btnDisable: false
    }
  },
  created() {
    const { library_id } = this.$route.query
    this.form.library_id = library_id
  },
  methods: {
    show() {
      this.open = true
      this.reset()
    },
    // 关闭弹框之前
    onBeforeClose() {
      if (this.btnDisable) {
        this.$modal.msgWarning('剧集正在努力上传中，请勿关闭')
      } else {
        this.open = false
        this.reset()
      }
    },
    onceSuccess() {
      this.$emit('refresh')
    },
    // 剧集批量成功上传到OSS，得到数据["剧集数-ossId","剧集数-ossId"]
    successResult() {
      this.btnDisable = false
      this.$modal.msgSuccess('批量剧集添加成功')
      this.open = false
      this.$refs.videoUploadBatchOssRef.reset()
    },
    // 表单重置
    reset() {
      const { library_id } = this.$route.query
      this.form = {
        library_id: library_id,
        episode_ids: undefined
      }
      this.resetForm('formRef')
    },
    uploadLoading() {
      this.btnDisable = true
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // addBatchEpisode(this.form).then(res => {
          //   this.$modal.msgSuccess('批量剧集添加成功')
          //   this.open = false
          //   this.$refs.videoUploadBatchOssRef.reset()
          //   this.$emit('refresh')
          // })
        } else {
          this.$refs.videoUploadBatchOssRef.reset()
          this.form.episode_ids = undefined
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
